<!DOCTYPE html>
<html>

  <head>
      <script>document.write('<base href="' + document.location + '" />');</script>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <title>PrimeNG - Serenity - Landing Page</title>
      
      <link rel="stylesheet" type="text/css" href="../theme/theme-bluegrey.css">
      <link rel="stylesheet" type="text/css" href="../layout/css/layout-bluegrey.css">
      <link rel="stylesheet" type="text/css" href="primeng.min.css">
      
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="../layout/script/ripple.js"></script>
  </head>

  <body class="landing-body">
        <div class="landing-wrapper">
            <div id="header">
                <div>
                    <img src="../layout/images/logo-colored.png" class="logo"/>
                    <a id="landing-menu-button" href="#">
                        <i class="material-icons">menu</i>
                    </a>
                    
                    <ul id="landing-menu">
                        <li>
                            <a href="#home">HOME</a>
                        </li>
                        <li>
                            <a href="#features">FEATURES</a>
                        </li>
                        <li>
                            <a href="#stats">STATS</a>
                        </li>
                        <li>
                            <a href="#video">VIDEO</a>
                        </li>
                        <li>
                            <a href="#pricing">PRICING</a>
                        </li>
                        <li>
                            <a href="#contact">CONTACT</a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div id="introduction">
                <div>
                    <h1>PrimeFaces Presents Serenity</h1>
                    <p>Modern and elegant responsive application template with a premium look for PrimeFaces components.</p>
                    <button type="button" class="ui-button ui-widget ui-corner-all ui-button-text-only pink-btn">
                        <span class="ui-button-text">LEARN MORE</span>
                    </button>
                </div>
            </div>
            
            <div id="features">
                <div>
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-6 feature-box">
                            <img src="../layout/images/landing/icon-responsive.svg">
                            <div>
                                <h3>RESPONSIVE LAYOUT</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                        
                        <div class="ui-g-12 ui-md-6 feature-box">
                            <img src="../layout/images/landing/icon-moderndesign.svg">
                            <div>
                                <h3>MODERN DESIGN</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                        
                        <div class="ui-g-12 ui-md-6 feature-box">
                            <img src="../layout/images/landing/icon-welldocumented.svg">
                            <div>
                                <h3>WELL DOCUMENTED</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                        
                        <div class="ui-g-12 ui-md-6 feature-box">
                            <img src="../layout/images/landing/icon-cleancode.svg">
                            <div>
                                <h3>CLEAN CODE</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="stats">
                <div>
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-4">
                            <div class="stat-box">
                                <img src="../layout/images/landing/icon-ui.svg">
                                <h3>100+</h3>
                                <p>UI COMPONENTS</p>
                            </div>
                        </div>
                        
                        <div class="ui-g-12 ui-md-4">
                            <div class="stat-box stat-box-active">
                                <img src="../layout/images/landing/icon-hours.svg">
                                <h3>425</h3>
                                <p>HOURS OF DEVELOPMENT</p>
                            </div>
                        </div>
                        
                        <div class="ui-g-12 ui-md-4">
                            <div class=" stat-box">
                                <img src="../layout/images/landing/icon-coffee.svg">
                                <h3>129</h3>
                                <p>CUPS OF COFFE</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="video">
                <div>
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-6 video-description">
                            <h3>PrimeFaces Premium Layout and Theme</h3>
                            <p>Take advantage of media's most prominent business trend, and empowers your internal advertising teams.</p>
                            <button type="button" class="ui-button ui-widget ui-corner-all ui-button-text-only pink-btn">
                                <span class="ui-button-text">LEARN MORE</span>
                            </button>
                        </div>
                        
                        <div class="ui-g-12 ui-md-6">
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/eKQUP2el3zU" frameborder="0" allowfullscreen="true"></iframe>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="pricing">
                <div>
                    <h2>Pricing</h2>
                    <p>Quis nostrud exercitation ullamco </p>
                    
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-4">
                            <div class="pricing-box">
                                <div class="pricing-header">
                                    <h3>BEGINNER</h3>
                                    <p>For starts</p>
                                </div>
                                
                                <div class="pricing-content">
                                    <div class="pricing-fee">5$</div>
                                    
                                    <ul>
                                        <li><i class="material-icons">check_circle</i> Responsive</li>
                                        <li><i class="material-icons">check_circle</i> Push Messages</li>
                                    </ul>

                                    <button type="button" class="ui-button ui-widget ui-corner-all ui-button-text-only pink-btn">
                                        <span class="ui-button-text">BUY NOW</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="ui-g-12 ui-md-4">
                            <div class="pricing-box pricing-box-pro">
                                <div class="pricing-header">
                                    <h3>PROFESSIONAL</h3>
                                    <p>Most Popular</p>
                                </div>
                                
                                <div class="pricing-content">
                                    <div class="pricing-fee">10$</div>
                                                                    
                                    <ul>
                                        <li><i class="material-icons">check_circle</i> Responsive</li>
                                        <li><i class="material-icons">check_circle</i> Push Messages</li>
                                        <li><i class="material-icons">check_circle</i> 10 Support Tickets</li>
                                        <li><i class="material-icons">check_circle</i> Free Shipping</li>
                                    </ul>
                                    
                                    <button type="button" class="ui-button ui-widget ui-corner-all ui-button-text-only pink-btn">
                                        <span class="ui-button-text">BUY NOW</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="ui-g-12 ui-md-4">
                            <div class="pricing-box">
                                <div class="pricing-header">
                                    <h3>ENTERPRISE</h3>
                                    <p>Larger Teams</p>
                                </div>
                                
                                <div class="pricing-content">
                                    <div class="pricing-fee">20$</div>
                                    
                                    <ul>
                                        <li><i class="material-icons">check_circle</i> Responsive</li>
                                        <li><i class="material-icons">check_circle</i> Push Messages</li>
                                        <li><i class="material-icons">check_circle</i> 7/24 Support</li>
                                        <li><i class="material-icons">check_circle</i> Free Shipping</li>
                                        <li><i class="material-icons">check_circle</i> Unlimited Space</li>
                                    </ul>
                                    
                                    <button type="button" class="ui-button ui-widget ui-corner-all ui-button-text-only pink-btn">
                                        <span class="ui-button-text">BUY NOW</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="contact">
                <div>
                    <h2>Contact</h2>
                    <p>Fill in the fields below and we’ll get back to you</p>
                    
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-8 contact-map">
                            <img src="../layout/images/landing/map-contact.png">
                        </div>
                                            
                        <div class="ui-g-12 ui-md-4 contact-form ui-fluid">
                            <div class="ui-g-12">
                                <span class="md-inputfield">
                                    <input type="text" pInputText class="ui-inputtext ui-corner-all ui-widget" />
                                    <label>Name</label>
                                </span>
                            </div>

                            <div class="ui-g-12">
                                <span class="md-inputfield">
                                    <input type="text" pInputText class="ui-inputtext ui-corner-all ui-widget" />
                                    <label>Email</label>
                                </span>
                            </div>
                            
                            <div class="ui-g-12">
                                <span class="md-inputfield">
                                    <input type="text" pInputText class="ui-inputtext ui-corner-all ui-widget" />
                                    <label>Message</label>
                                </span>
                            </div>
                            
                            <button type="button" class="ui-button ui-widget ui-corner-all ui-button-text-only indigo-btn">
                                <span class="ui-button-text">SEND</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="footer">
                <div>
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-4">
                            <img src="../layout/images/logo-slim.png" class="footer-logo" />
                            
                            <div>
                                <h4>ABOUT SERENITY</h4>
                                <p>PrimeFaces Premium Templates</p>    
                            </div>
                        </div>
                        
                        <div class="ui-g-12 ui-md-4">
                            <h4>CONTACT</h4>
                            <p>Lorem ipsum dolor sit amet, Consectetur adipisicing elit.  344 CA, San Francisco USA</p>
                            <p><i class="material-icons">phone</i> +108278 92 728</p>    
                        </div>
                        
                        <div class="ui-g-12 ui-md-4 footer-social">
                            <h4>SOCIAL</h4>
                            <a href="#">
                                <img src="../layout/images/landing/icon-twitter.svg">
                            </a>
                            <a href="#">
                                <img src="../layout/images/landing/icon-linkedin.svg">
                            </a>
                            <a href="#">
                                <img src="../layout/images/landing/icon-facebook.svg">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </h:body>
</html>